<template >
  <div :style="note" class="monitoring">
    <div :style="title">{{titles}}</div>
     <rz-height></rz-height>
     <rz-height></rz-height>
    <el-row :gutter="15" class="col_wapper">
      <el-col :span="7" class="col_wapper">
        <left ref="ehaetsleft" :code="code"></left>
      </el-col>
      <el-col :span="10" class="col_wapper col_center">
        <center ref="ehaetscenter" :code="code"></center>
      </el-col>
      <el-col :span="7" class="col_wapper">
        <right ref="ehaetsright" :code="code"></right>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapState } from "vuex";
import store from "@/store";
export default {
  name: "Pagedashboard",
  // props:[],
  // 页面加载
  created() {
    // if (this.$route.query.code) {
    //   this.code = this.$route.query.code;
    // }
     if (this.$route.query.code == "32050604") {
     this.code= "320500";
    } else if (this.$route.query.code) {
     this.code = this.$route.query.code;
    } else {
     this.code = "320500";
    }
  },
  // 页面加载完成
  mounted() {
    window.addEventListener("resize", this.onresize);
  },
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {
    window.removeEventListener("resize", this.onresize);
  },
  data() {
    return {
      code: "320500",
      note: {
        backgroundImage: "url(" + require("@/assets/images/background.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center",
         backgroundSize: "100% 100%",
        //  background: "#09153f",
         
      },
      title: {
        backgroundImage:
          "url(" + require("@/assets/images/top_title.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "60% 100%",
        backgroundPosition: "center",
        height: "60px",
        lineHeight: "60px",
        textAlign: "center",
        color: "#00E1FA",
        fontWeight: 500,
        fontSize: "30px",
      },
    };
  },
  // 方法
  methods: {
    onresize() {
      this.$nextTick(() => {
        this.$refs.ehaetsleft.myChartleft.resize();
        // this.$refs.ehaetscenter.myChart.resize();
        // this.$refs.ehaetsright.myChart.resize();
        this.$refs.ehaetsright.myChartColumnar.resize();
        this.$refs.ehaetsleft.myChartleftColumn.resize();
      });
    },
  },
  // 监听属性
  watch: {
    opened: function (e) {
      this.$nextTick(() => {
        setTimeout(() => {
          this.onresize();
        }, 300);
      });
    },
  },
  // 组件
  components: {
    right: () => import("./components/right"),
    left: () => import("./components/left"),
    center: () => import("./components/center"),
  },
  // 计算属性
  computed: {
    opened: () => store.state.app.sidebar.opened,
    titles() {
      let regionList = [
        {
          value: "320500",
          label: "苏州市",
        },
        {
          value: "320506",
          label: "吴中区",
        },

        {
          value: "320507",
          label: "相城区",
        },
        {
          value: "320505",
          label: "高新区",
        },
        {
          value: "320508",
          label: "姑苏区",
        },
        {
          value: "320509",
          label: "工业园区",
        },
        {
          value: "320581",
          label: "常熟市",
        },
        {
          value: "320582",
          label: "张家港市",
        },
        {
          value: "320583",
          label: "昆山市",
        },
        {
          value: "320584",
          label: "吴江区",
        },
        {
          value: "320585",
          label: "太仓市",
        },
        {
          value: "320592",
          label: "张家港保税区",
        },
      ];
      let data = regionList.filter((x) => (x.value ==this.code));
      if (data.length) {
        return data[0].label + "食品安全综合治理平台";
      } else {
        return "苏州市食品安全综合治理平台";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.monitoring {
  min-width: 1200px;
  min-height: 100%;
  font-size: 14px;
  // min-width: 1200px;
  .col_wapper {
    height: 100%;
    margin: 0 !important;
  }
.col_center{
  height:750px
}
}
</style>